<!doctype html>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grima Portal</title>
	<link rel="stylesheet" type="text/css" href="../css/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/portal.css">
	<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
	
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	
    <div data-options="region:'north',border:false" style="height:50px;padding:10px;overflow: hidden;">
		<jsp:include page="header.jsp" />
	</div>
    <div data-options="region:'east',split:true,collapsed:true,title:' '" style="width:250px;padding:10px;"></div>
	<div data-options="region:'south',border:false" style="height:30px;padding:10px;background:#F5F5F5;text-align:center;color:#707070">
		<jsp:include page="footer.jsp" />
	</div>
    <div data-options="region:'center',title:'Descritivos'">
    
    <c:if test="${not empty descriptives}">
		<table id="dg" class="easyui-datagrid" title="" data-options="rownumbers:true,singleSelect:true,method:'get',toolbar:'#tb',fitColumns:true,onClickRow: onClickRow">
			<thead>
				<tr>
					<th data-options="field:'id',width:70">Id</th>
					<th data-options="field:'customer.name',width:80,align:'left'">Cliente</th>
					<th data-options="field:'status',width:80,align:'left'">Status</th>
					<th data-options="field:'createdOn',width:80,align:'left'">Data Criação</th>
					<th data-options="field:'processInstanceId',width:70,align:'left'">Processo</th>
					<th data-options="field:'collection',width:150">Coleção</th>
					<th data-options="field:'segment',width:100,align:'left'">Segmento</th>
				</tr>
			</thead>
            <c:forEach items="${descriptives}" var="descriptive">
                <tr>
                    <td>${descriptive.id}</td>                    
					<td>${descriptive.customer.name}</td>
                    <td>${descriptive.status.description}</td>
                    <td>${descriptive.createdOn}</td>
                    <td>${descriptive.processInstanceId}</td>
                    <td>${descriptive.collection}</td>
                    <td>${descriptive.segment}</td>
                </tr>
            </c:forEach>
		</table>
		<div class="easyui-pagination" style="border:1px solid #ccc;" data-options="
				total: ${count},
				pageNumber: ${page.pageNumber},
				pageSize: ${page.pageSize},
				onSelectPage: function(pageNumber, pageSize){
				changePage(pageNumber, pageSize);
			}">
		</div>
    </c:if>
    <c:if test="${empty descriptives}">
    	Não há descritivos cadastrados.
    </c:if>
	
	<div id="tb" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<a href="<%=request.getContextPath()%>/secure/addDescriptive.html" title="Novo" ><i class="fa fa-plus" style="font-size:18px;color:green;padding:5px;"></i>Novo</a>
			<a href="#" title="Detalhes" onclick="details();"><i class="fa fa-list" style="font-size:18px;color:green;padding:5px;"></i>Detalhes</a>
			<a href="#" title="Editar" onclick="edit();"><i class="fa fa-edit" style="font-size:18px;color:green;padding:5px;"></i>Editar</a>
			<a href="#" title="Excluir" onclick="confirmDelete();"><i class="fa fa-trash-o" style="font-size:18px;color:green;padding:5px;"></i>Excluir</a>
<!-- 
			<a href="#" title="Histórico" onclick="history();"><i class="fa fa-history" style="font-size:18px;color:green;padding:5px;"></i>Histórico</a>
			<a href="#" title="Arquivos" onclick="explorer();"><i class="fa fa-folder-open" style="font-size:18px;color:green;padding:5px;"></i>Arquivos</a>
 -->
		</div>
		<br/>
		<div>
			Cliente: <input id="customer" style="width:80px" value="${customer}"> <a href="#" title="Selecionar Cliente"><i class="fa fa-toggle-up" style="font-size:18px;color:gray;padding-right:7px;"></i></a>
			Data Criação: <input id="creationDateFrom" class="easyui-datebox" style="width:80px" value="${creationDateFrom}">
			Até: <input id="creationDateTo" class="easyui-datebox" style="width:80px" value="${creationDateTo}">
			
			Status: 
			<select class="easyui-combobox" panelHeight="auto" style="width:100px">
				<option value=""></option>
				<option value="nova">Nova</option>
				<option value="planejada">Planejada</option>
				<option value="pecas recebidas">Peças Enviadas</option>
				<option value="finalizada">Finalizada</option>
			</select>
			<a href="#" onclick="searchDescriptive();" class="easyui-linkbutton" iconCls="icon-search">Pesquisar</a>
		</div>
	</div>
    </div>

<div id="history" class="easyui-window" title="HistÃ³rico" data-options="modal:true,closed:true" style="width:800px;height:500px;padding:10px;">
	<div style="margin:5px">
		<a href="#" title="Voltar" onclick="closeHistory();"><i class="fa fa-mail-reply" style="font-size:18px;color:green;padding:5px;"></i>Voltar</a>
	</div>
	<br/>
	  
	<table id="dgHistory" class="easyui-datagrid" title=""
			data-options="rownumbers:true,singleSelect:true,url:'history.json',method:'get',pagination:true,fitColumns:true">
		<thead>
			<tr>
				<th data-options="field:'date',width:80">Data</th>
				<th data-options="field:'time',width:60">Hora</th>
				<th data-options="field:'user',width:70">Usuário</th>
				<th data-options="field:'field',width:70">Campo</th>
				<th data-options="field:'from',width:100">Alterado De</th>
				<th data-options="field:'to',width:100">Para</th>
			</tr>
		</thead>
	</table>
</div>

<input type="hidden" id="selectedItemId"/>

	<script>
		function searchDescriptive(){
			var customer = $('#customer').val();
			var creationDateFrom = $('#creationDateFrom').val();
			var creationDateTo = $('#creationDateTo').val();
			var	pageNumber = 1;
			var pageSize = ${page.pageSize};
			
			window.location.href = '<c:url value="/secure/descriptives.html"/>?pageNumber='+pageNumber+'&pageSize='+pageSize+'&customer='+customer+'&creationDateFrom='+creationDateFrom+'&creationDateTo='+creationDateTo;

		}
		function onClickRow(index){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#selectedItemId').val(row.id);
			}
		}
		function details(){
			var id = $('#selectedItemId').val();
			if (id > 0){
				window.location.href = '<c:url value="/secure/descriptiveDetails.html"/>?id='+id;
			}
		}
		function edit(){
			var id = $('#selectedItemId').val();
			if (id > 0){
				window.location.href = '<c:url value="/secure/descriptiveEdit.html"/>?id='+id;
			}
		}
		function confirmDelete(){
			var id = $('#selectedItemId').val();
			if (id > 0) {			
				$.messager.confirm('Aviso', 'Confirma exclusão?', function(r){
					if (r){
						window.location.href = '<c:url value="/secure/descriptiveDelete.html"/>?id='+id;
					}
				});
			}
		}
		function changePage(pageNumber, pageSize){
			var customer = $('#customer').val();
			var creationDateFrom = $('#creationDateFrom').val();
			var creationDateTo = $('#creationDateTo').val();

			window.location.href = '<c:url value="/secure/descriptives.html"/>?pageNumber='+pageNumber+'&pageSize='+pageSize+'&customer='+customer+'&creationDateFrom='+creationDateFrom+'&creationDateTo='+creationDateTo;
		}

		function history(){
			$('#history').window('open');
		}
		function closeHistory(){
			$('#history').window('close');
		}

	</script>
	
</body>
</html>